import {defineComponent, ref} from "vue"
import Thumb from "./thumb"
import {GAP} from "./constants"

export default defineComponent({
    props:{
        height:{
            type:Number,
            default:0
        },
        width:{
            type:Number,
            default:0
        },
        ratioX:{
            type:Number,
            default:1
        },
        ratioY:{
            type:Number,
            default:1
        }
    },
   
    setup(props,{slots,expose}){
        // 滚动条移动的位置
        let moveX =ref(0)
        let moveY = ref(0)


        const handleScroll = (wrap:HTMLDivElement)=>{
           if(wrap){
            // console.log(props.ratioX,props.ratioY)
            const offsetHeight = wrap.offsetHeight -GAP
            const offsetWidth = wrap.offsetWidth - GAP
            
            moveY.value = ((wrap.scrollTop*100)/offsetHeight)
            *props.ratioY
            moveX.value = ((wrap.scrollLeft*100)/offsetWidth)*
            props.ratioX
           

           }
            
        }
        
        expose({
            handleScroll
        })

        return ()=>(
           <>
             <Thumb size={props.height} move={moveY.value} vertical ratio={props.ratioY}></Thumb>
            <Thumb size={props.width} move={moveX.value} ratio={props.ratioX}></Thumb>
           </>
        )

    }

})